<template>
  <el-container class="question-edit-page-main">
    <el-header class="header">
      <h1>问题编辑页面</h1>
    </el-header>
    <el-container class="edit-container">
      <el-main class="edit-main">
        <ContainerBox type="common" class="detail">
          <h3>问题详情：</h3>
          <ContainerBox class="info">
            <div class="title"><b>标题：</b>{{title}}</div>
            <div class="author"><b>发布者：</b>{{nickname}}</div>
            <div class="content"><b>内容：</b>
              {{content}}
            </div>
          </ContainerBox>
        </ContainerBox>
        <ContainerBox type="primary" class="answer">
          <h3>回答：</h3>
          <el-input type="textarea"
                    :rows="18" placeholder="回答" v-model="answer"></el-input>
          <div class="options">
            <el-button type="primary" @click="confirmAnswer">确认解答</el-button>
            <el-button type="danger" @click="$router.push('/admin/skill/questionManager')">取消</el-button>
          </div>
        </ContainerBox>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import ContainerBox from "../../../components/box/container_box";

export default {
  name: "question_edit",
  data() {
    return {
      title: "",
      content: '',
      nickname: "",
      answer: ""
    }
  },
  components: {ContainerBox},
  mounted() {
    this.getQuestionsDetail(this.$route.params.id);
  },
  methods: {
    getQuestionsDetail: function (questionId) {
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/question/get/' + questionId
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log("jsonObj", jsonObj);
        if (jsonObj.success) {
          self.title = jsonObj.data.VO.title;
          self.content = jsonObj.data.VO.content;
          self.nickname = jsonObj.data.VO.nickname;
          self.answer = jsonObj.data.VO.answer;
        } else {
          // 异常跳转
        }
      })
    },
    confirmAnswer() {
      const self = this;
      this.$axios({
        method: 'post',
        url: '/admin/skill/question/answer',
        data: {
          questionId: self.$route.params.id,
          answer: self.answer
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log("jsonObj", jsonObj);
        if (jsonObj.success) {
          self.$confirm('解答成功！', '提示', {
            confirmButtonText: '返回管理页面',
            cancelButtonText: '继续解答',
            type: 'warning'
          }).then(() => {
            self.$router.push("/admin/skill/questionManager")
          }).catch(() => {

          });
        } else {
          // 异常跳转
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.question-edit-page-main {
  height: 100%;

  .header {
    margin-bottom: 20px;
    text-align: center;
  }

  .edit-container {
    box-sizing: border-box;
    width: 1200px;
    height: 560px;
    margin: 0 auto;

    .edit-main {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      >div {
        width: 48%;
        height: 95%;
      }
      .detail {
        .info {
          width: 100%;
          > div {
            margin-bottom: 10px;
            width: 50%;
          }
          .content {
            height: 360px;
            width: 100%;
            white-space: normal;
            overflow: auto;
          }
        }
      }
      .answer {
        .options {
          width: 100px;
          margin-top: 10px;
          margin-left: 160px;
        }
      }
    }
  }
}
</style>
